import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css';
import styles from './style.module.scss';
class Carousel extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            activeIndex: 0,
            defaultData:[
                {
                    bannerUrl: 'https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/main_iPhoneX.png',
                    businessType: '0',
                    color: 'red'
                },
                {
                    bannerUrl: 'https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/education_iPhoneX%20.png',
                    businessType: '0',
                    color: 'blur'
                },
                {
                    bannerUrl: 'https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/chapter%20_iphoneX.png',
                    businessType: '0',
                    color: '#000'
                }
            ]
        }
    }
    render() {
        /**
         * @param {boole}  pagination 是否显示分页器
         * @param {array}  data       轮播数据
         * @param {boole}  full       是否通栏显示
         */
        const {pagination , data , full , history} = this.props;
        // 父组件不传入data，选择state默认数据
        let slideData = [];
        if (!data) {
            slideData = this.state.defaultData;
        } else {
            slideData = data;
        };
        return (
            <div className={styles['banner']}>
                <div className="swiper-container" ref={swiperObj => {this.swiperObj = swiperObj}}>
                    <div className='swiper-wrapper'>
                        {
                            slideData.map((item,index)=>{
                                return(   
                                    <div data-i={index} className={`swiper-slide swiper-no-swiping ${styles['swiper-width']}`} key={index} style={{backgroundColor: item['bannerBackground'] || ''}}>
                                        <div className={`${styles['swiper-box']} ${full ? styles['swiper-full'] : ''}`} onClick={
                                            /**
                                             * @param {string}  businessType 0 无 1曲谱 2外链
                                             */
                                            (()=>{
                                                if (item['businessType'] === '2') {
                                                    // history.push({
                                                    //     pathname: ,
                                                    // })
                                                    // window.location.href = item['internetLink']
                                                    window.open(window.location.origin+'/scoreParticulars?'+`score_id=${item['scoreDatum']['id']}&state=1`)
                                                } else if (item['businessType'] === '1' && item['scoreDatum']) {
                                                    // history.push({
                                                    //     pathname: "/scoreParticulars",
                                                    //     search: `score_id=${item['scoreDatum']['id']}&state=1`
                                                    // })
                                                    window.open(window.location.origin+'/scoreParticulars?'+`score_id=${item['scoreDatum']['id']}&state=1`)
                                                }
                                            })
                                        }>
                                            <img src={item['bannerUrl']} alt="" />
                                        </div> 
                                    </div>
                                )
                            })
                        }
                    </div>
                    {
                        (()=>{
                            /**
                             * @param {boole} pagination   是否显示分页器
                             */
                            if (pagination) {
                                return (
                                    <div className={styles['pagination']} >
                                        {
                                            slideData.map((item,index)=>{
                                                return (
                                                    <div onClick={this.handleClick.bind(this,index)} className={`${styles['point']} ${ this.state.activeIndex === index ? styles['point-active'] : ''}`} key={JSON.stringify(item)}></div>
                                                )
                                            })
                                        }
                                    </div>
                                )
                            }
                        })()
                    }
                    
                    
                </div>
            </div>
        )
    }
    /**
     * 切换页面
     * @param {int} index 
     */
    handleClick (index) {
        this.mySwiper.slideTo(index);
        setTimeout(() => {
            this.mySwiper.autoplay.start();
        }, 3000);
        // this.setState({
        //     activeIndex: index
        // })
    }
    componentDidMount (){
        const self = this;
        this.mySwiper = new Swiper(this.swiperObj,{
            // 循环模式选项
            loop: true,
            // 切换速度
            speed:300, 
            // 自动轮播  时间
            autoplay : {
                delay:3000
            },
            watchOverflow: true,
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            on: {
                slideChange: function () {
                    self.setState({
                        activeIndex: this.realIndex
                    })
                },
            }
        })
        // if (this.mySwiper && this.mySwiper.el) {
        //     //鼠标覆盖自动切换
        //     this.mySwiper.el.onmouseover = ()=> {
        //         this.mySwiper.autoplay.stop();
        //     }
        //     //鼠标退出停止自动切换
        //     this.mySwiper.el.onmouseout = ()=> {
        //         this.mySwiper.autoplay.start();
        //     }
        // } 
        
    }
}

const mapState = (state) => ({

});

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(withRouter(Carousel));